import ProxySetting, { ProxySettingContent } from '@/components/ProxySetting';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Textarea } from '@/components/ui/textarea';
import { cn } from '@/lib/utils';
import { useGigaStore } from '@/store/giga';
import { useId } from 'react';

type Props = {
  children?: React.ReactNode;
  className?: string;
};

export default function AvailableSetting({ children, className, ...props }: Props) {
  const availableSettings = useGigaStore((state) => state.availableSettings);
  const localDiskRefreshDuration = useGigaStore((state) => state.localDiskRefreshDuration);
  const dispatch = useGigaStore((state) => state.dispatch);
  const id = useId();
  return (
    <div className={cn(className, 'flex flex-col')} {...props}>
      <div className="grow relative">
        <ScrollArea className="border rounded-sm !absolute h-full w-full p-2 pt-2">
          <div>
            <div className="flex px-3 gap-2 items-center py-4">
              <Label className="whitespace-nowrap" htmlFor={id + '-local-disk-refresh-duration'}>
                磁盘目录的刷新间隔:
              </Label>
              <Input
                value={localDiskRefreshDuration}
                type="number"
                onChange={(event) => {
                  dispatch({
                    type: 'update',
                    update(draftState) {
                      draftState.localDiskRefreshDuration = +event.target.value;
                    },
                  });
                }}
                id={id + '-local-disk-refresh-duration'}
                className="h-10 w-auto rounded-md border border-input px-3 py-2"
              />
            </div>
          </div>
          <div className="flex px-3 gap-2 items-center py-4 bd-bottom-gray">
            <Label className="whitespace-nowrap mb-0" htmlFor={id + '-task-concurrency-limit'}>
              执行库存采集任务时的并发请求数:
            </Label>
            <Input
              value={availableSettings.taskConcurrencyLimit}
              type="number"
              onChange={(event) => {
                dispatch({
                  type: 'update',
                  update(draftState) {
                    draftState.availableSettings.taskConcurrencyLimit = +event.target.value;
                  },
                });
              }}
              id={id + '-task-concurrency-limit'}
              className="h-10 w-auto rounded-md border border-input px-3 py-2 mr-auto"
            />
          </div>
          <div className="flex px-3 gap-2 py-4 items-center">
            <Checkbox
              checked={availableSettings.isStopByError}
              onCheckedChange={(state) => {
                dispatch({
                  type: 'update',
                  update(draftState) {
                    draftState.availableSettings.isStopByError = state ? true : false;
                  },
                });
              }}
              id={id + '-is-stop-by-captcha'}
              className="rounded-[2px]"
            />
            <Label className="whitespace-nowrap mb-0" htmlFor={id + '-is-stop-by-captcha'}>
              是否在遇到无法处理的错误时终止任务
            </Label>
          </div>
          <div className="flex px-3 gap-2 py-4 bd-bottom-gray items-center">
            <Checkbox
              checked={availableSettings.isDefaultOpenAvaliable}
              onCheckedChange={(state) => {
                dispatch({
                  type: 'update',
                  update(draftState) {
                    draftState.availableSettings.isDefaultOpenAvaliable = state ? true : false;
                  },
                });
              }}
              id={id + '-is-default-open-avaliable'}
              className="rounded-[2px]"
            />
            <Label className="whitespace-nowrap mb-0" htmlFor={id + '-is-default-open-avaliable'}>
              是否默认打开库存详情的弹框
            </Label>
          </div>
          <ProxySettingContent></ProxySettingContent>
        </ScrollArea>
      </div>
    </div>
  );
}
